/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 15:55:09
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PixelRatio,
  TouchableOpacity,
  ScrollView,
  Image,
  TextInput,
} from 'react-native';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorBlack,
  mainBgColorLightGray,
  fontColorRed,
} from '@/styles';
import { _ } from '@/common';

export default class CarBoastInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { taxAmount, insurAmount, insurAllAmount, onChange } = this.props;
    return (
      <View style={styles.wrap}>
        <View style={styles.item}>
          <Text style={styles.label}>车船税共计</Text>
        </View>
        <View style={styles.item}>
          <View style={styles.itemInput}>
            <TextInput
              placeholder='请输入车船税共计'
              style={[styles.textInputStyle, { color: fontColorBlack }]}
              value={taxAmount}
              underlineColorAndroid='transparent'
              onChangeText={(val) => {
                // 清理非数字.
                val = _.clearNoNum(val);
                // 保留两位小数
                val = _.clearDotNumTo2(val);
                onChange('taxAmount', val);
                onChange(
                  'insurAllAmount',
                  (Number(val) * 100 + Number(insurAmount) * 100) / 100,
                );
              }}
              keyboardType={
                Platform.OS === 'android' ? 'numeric' : 'decimal-pad'
              }
            />
            <Text style={{ color: fontColorDeepGray }}>元</Text>
          </View>
        </View>
        <View style={[styles.item, { justifyContent: 'space-between' }]}>
          <Text style={styles.label}>保费及税款合计</Text>
          <Text style={styles.desc}>
            <Text style={{ color: fontColorRed }}>{insurAllAmount || '0'}</Text>
            元
          </Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    marginTop: px2dp(24),
    paddingVertical: px2dp(16),
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(16),
  },
  label: {
    fontSize: px2dp(28),
    color: fontColorDeepGray,
    width: px2dp(264),
  },
  desc: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    fontWeight: 'bold',
  },
  descWrap: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  itemInput: {
    paddingHorizontal: px2dp(24),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    width: '100%',
  },
  textInputStyle: {
    height: px2dp(88),
    flex: 1
  }
});
